<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加工厂人员' : '修改工厂人员'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="姓名" prop="realname">
        <el-input v-model="form.realname" show-word-limit :maxlength="20" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="form.tel" show-word-limit placeholder="请输入电话" clearable />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" show-word-limit placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item label="登录密码" prop="passwords">
        <el-input v-model="form.passwords" show-word-limit placeholder="请输入登录密码" clearable />
      </el-form-item>
      <el-form-item label="工厂名称" prop="factoryname">
        <el-select v-model="form.factoryname" placeholder="请选择工厂名称" clearable>
          <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职能名称" prop="authid">
        <el-select v-model="form.authid" placeholder="请选择职能名称" clearabl>
          <el-option v-for="item in authList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">休息中</el-radio>
          <el-radio :label="1">工作中</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { getAllFactoryList } from "@/api/factory/category";
import { factoryAuthList } from "@/api/factory/auth";
import { factoryMemberSave, getFactoryMember } from "@/api/factory/member";
export default {
  data() {
    return {
      visible: false,
      form: {
        id: null,
        realname: '',
        tel: '',
        username: '',
        passwords: '',
        factoryname: '',
        authid: '',
        status: '',
      },
      confirmLoading: false,
      queryParams: {},
      factoryList: [], //工厂下拉框option
      authList: [], //职能下拉框option
    }
  },

  computed: {
    dataRule() {
      return {
        realname: [
          { required: true, message: '请输入姓名', trigger: 'change' }
        ],
        tel: [
          { required: true, message: '请输入电话', trigger: 'change' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        passwords: [
          { required: true, message: '请输入登录密码', trigger: 'change' }
        ],
        factoryname: [
          { required: true, message: '请选择工厂名称', trigger: 'change' }
        ],
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        // 获取工厂下拉框option
        getAllFactoryList().then((res) => {
          this.factoryList = res.data
        })
        // 获取职能下拉框option
        factoryAuthList().then((res) => {
          this.authList = res.data
        })
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        realname: '',
        tel: '',
        username: '',
        passwords: '',
        factoryname: '',
        authid: '',
        status: '',
      };
    },

    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getFactoryMember(id).then(response => {
        response.data.authid = Number(response.data.authid)
        response.data.factoryname = Number(response.data.factoryname)
        this.form = response.data;
      });
    },

    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          factoryMemberSave(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
#J_quillEditor {
  min-height: 400px;
}
</style>
